<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理首页</title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .layout-container-demo .el-header {
            position: relative;
            background-color: var(--el-color-primary-light-7);
            color: var(--el-text-color-primary);
        }
        .layout-container-demo .el-aside {
            color: var(--el-text-color-primary);
            background: var(--el-color-primary-light-8);
        }
        .layout-container-demo .el-menu {
            border-right: none;
            background: var(--el-color-primary-light-8);
        }
        .layout-container-demo .el-main {
            padding: 0;
        }
        .layout-container-demo .toolbar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            right: 20px;
        }
        h1{
            font-size: 25px;
            float: left;
            margin-top: 10px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .el-main{
            height: 640px;
        }
        .el-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #666;
        }
        .el-aside{
            overflow: hidden;
        }
        .el-aside-logo{
            height: 100px;
            background: url('../images/login_title.png') no-repeat center / 120px auto;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container class="layout-container-demo" style="height: 700px">
        <el-aside width="200px">
            <div class="el-aside-logo"></div>
            <el-scrollbar>
                <el-menu>
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon><Service /></el-icon>职位管理
                        </template>
                        <el-menu-item index="1-1"><a href="company.html" target="main"><el-icon><Star /></el-icon>公司信息</a></el-menu-item>
                        <el-menu-item index="1-2"><a href="job_categories.html" target="main"><el-icon><Grid /></el-icon>类别信息</a></el-menu-item>
                        <el-menu-item index="1-3">职位信息</el-menu-item>

                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><Avatar /></el-icon>管理员信息
                        </template>
                        <el-menu-item index="2-1">管理员信息</el-menu-item>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <h1>校园招聘管理系统</h1>
                <div class="toolbar">

                    <el-dropdown>
                        <el-icon style="margin-right: 8px; margin-top: 1px">
                            <setting />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>View</el-dropdown-item>
                                <el-dropdown-item>Add</el-dropdown-item>
                                <el-dropdown-item @click="logout">logout</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>{{username}}</span>
                </div>
            </el-header>

            <el-main>
                <iframe name="main" class="el-main" width="100%" frameborder="0"></iframe>
            </el-main>

            <!-- 底部区域 -->
            <el-footer>campus ©2023 Created by cuit-校园招聘</el-footer>

        </el-container>
    </el-container>
</div>


<script>
    const {createApp,reactive,ref} = Vue

    const app = createApp({
        //选项式API
        data() { //vue要使用的数据模型
            return { //数据模型声明式必须return出一个对象
                username: ''
                //tableData: Array.from({ length: 20 }).fill(item)
            }
        },
        //声明的事件函数
        methods: {
            async logout(){
                await axios.get(`http://localhost/admin/administrators/logout`,{
                    withCredentials: true
                })
                localStorage.removeItem('username')
                window.location = 'login.html'
            }
        },
        //声明组件(页面)声明周期钩子函数 (created)
        created() {
            const username = localStorage.getItem("username")
            if(username){
                this.username = username
            } else {
                window.location = 'login.html'
            }
        },
    });
    for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
        app.component(name, comp);
    }
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>